import React, { Component } from 'react'

/* 
在哪里启动循环定时器?
  只执行一次
  componentDidMount中执行
问题: 在组件卸载后, 定时器依然还在不断运行(没有任何意义)
解决: 在componentWillUnmount中清除定时器
*/


export default class LifeTest extends Component {

  state = {
    msg: 'atguigu'
  }

  handleClick = () => {
    this.setState({msg: this.state.msg + '+++'})
  }

  // 在初始显示之后执行一次
  // 一般在此方法执行一次性异步任务: 定时器/ajax请求等
  componentDidMount () {
    // 启动循环定时器, 每隔1S更新一下msg
    // 将定时器的id保存到组件对象上, 让其它生命周期钩子也能看到
    this.intervalId = setInterval(() => {
      // console.log('定时器回调')
      this.setState({msg: this.state.msg + '+'})
    }, 1000)
  }

  /* 
  问题: 在组件卸载后, 定时器依然还在不断运行(没有任何意义)
  解决: 在componentWillUnmount中清除定时器
  */
  componentWillUnmount () {
    clearInterval(this.intervalId)
  }

  render() {
    // 读取state => 显示组件界面
    const {msg} = this.state
    return (
      <div style={{border: '1px solid gray'}}>
        <h3>LifeTest组件</h3>  
        <p>state.msg: {msg}</p>
        <p>props.count: {this.props.count}</p>

        <button onClick={this.handleClick}>更新msg</button>
      </div>
    )
  }
}
